<template>
	<view>
		<view class="frined-list padding_30" v-for="(item,index) in notifyList" :key="item.id">
			<view v-if="item.user_info" @click="toUserPage(item.user_info.id)">
				<image v-if="item.user_info.avatar!=''" :src="baseurl + '/' +item.user_info.avatar" mode="aspectFill"></image>
				<image v-else src="@/static/images/avatar.png" mode="aspectFill"></image>
			</view>
			<view class="content">
				<view class="name" v-if="item.user_info">
					{{item.user_info.username}}
				</view>
				<view class="time-info">
				<!-- 	<text class="text1 two-text-cut" v-if="item.content">{{item.content.text}}</text> -->
					<uv-text :lines="2" v-if="item.content" :text="item.content.text"></uv-text>
					<!-- <text class="text1" style="padding-left: 20rpx;">{{item.createtime}}</text> -->
					<text class="text1" v-if="item.minute<60&&item.minute>0">
						{{item.minute}}分钟前
					</text>
					<text class="text1" v-if="item.hour<24&&item.hour>0">
						{{item.hour}}小时前
					</text>
					<text class="text1"  v-if="item.hour>=24&&item.hour>0">
						{{item.day}}天前
					</text>
					<text class="text1" v-if="item.hour==0&&item.minute==0&&item.day==0">
						刚刚
					</text>
				</view>
			</view>
			<view class="banner-img" v-if="item.content">
				<image v-if="checkMediaType(item.content.image[0])=='image'" class="img" :src="baseurl+item.content.image[0]" mode="aspectFill"></image>
				<video :src="baseurl+item.content.image[0]" :controls="false" :show-center-play-btn="false" style="width: 100rpx;height: 100rpx;border-radius: 0;" v-else></video>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {onLoad,onReachBottom} from '@dcloudio/uni-app'
	import {ref} from 'vue'
	import {getNotifyListAPI} from '@/api/chat.js'
	import {
		throttle
	} from '@/utils/utils.js'
	import {
		useUserStore
	} from '@/store/modules/user.js'
	const userstore = useUserStore()
	const baseurl = ref('')
	const page = ref(1)
	const total = ref(0)
	const notifyList = ref([])
	onLoad(()=>{
		baseurl.value = uni.getStorageSync('baseUrl')
		getNotifyList()
	})
	onReachBottom(()=>{
		  if (notifyList.value.length >= total.value){
		    uni.showToast({
		      title: "没有更多了",
		      icon:"none",
		      mask: true,
		      duration: 800
		    })
		    return
		  }
		  page.value++
		
		  uni.showLoading({
		    title: "正在加载...",
		    mark: true
		  })
		  getNotifyList()
	})
	// 判断数组中是图片还是视频
	const checkMediaType = (url) => {
		// 获取路径的最后一个点之后的内容作为文件扩展名
		var extension = url.split('.').pop().toLowerCase();
		// 声明支持的图片和视频文件扩展名
		var imageExtensions = ['jpg', 'jpeg', 'gif', 'png','ico'];
		var videoExtensions = ['mp4', 'wmv', 'avi', 'mov'];
		// 判断文件扩展名是否在图片扩展名数组中
		if (imageExtensions.includes(extension)) {
			return 'image';
		}
		// 判断文件扩展名是否在视频扩展名数组中
		if (videoExtensions.includes(extension)) {
			return 'video';
		}
		// 扩展名不在图片或视频数组中，返回null表示无法确定媒体类型
		return null;
	}
	const getNotifyList = async()=>{
		let res = await getNotifyListAPI({page:page.value})
		if(res.code==200&&res.data){
			uni.hideLoading()
			total.value = res.data.total
			notifyList.value = notifyList.value.concat(res.data.data).filter(item=>{
				return item.user_info!=null
			})
		}else{
			uni.hideLoading()
		}
	}
	const toUserPage = (userId)=>{
		uni.navigateTo({
			url:'/pages/user/userpage/index?userId='+userId
		})
	}
</script>

<style lang="scss" scoped>
	.frined-list{
		display: flex;
		align-items: center;
		image{
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
		}
		.content{
			flex: 1;
			margin-left: 24rpx;
			.name{
				font-weight: 400;
				font-size: 32rpx;
				color: #222222;
			}
			.time-info{
				padding: 8rpx 0;
				.text1{
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
				}
			}

		}
		.banner-img{
			padding-left: 30rpx;
			.img{
				border-radius: 0;
				width: 100rpx;
				height: 100rpx;
			}
		}
	}
</style>
